<template>
  <el-dropdown @command="handleCommand" trigger="click">
    <el-button :type="buttonInfo.type" size="small">
      {{ buttonInfo.text }}<el-icon class="el-icon--right"><ArrowDown /></el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in options" :command="item">{{ item.dictLabel }}</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue'
import { useAssetStatusStore } from '../../stores'
import { ArrowDown } from '@element-plus/icons-vue'

const emit = defineEmits(['update:modelValue', 'change'])
const props = defineProps({
  modelValue: {
    type: Number,
    default: -1,
  },
})
const buttonInfo = reactive({
  text: '',
  type: '',
})
const localValue = ref(props.modelValue)
const options = ref<any[]>(useAssetStatusStore().assetStatus)

const handleCommand = (command: any) => {
  localValue.value = command.dictValue
  emit('change', command)
}

const typeArr = ['danger', 'warning', 'success']
// primary
const init = () => {
  buttonInfo.text = options.value.find((item) => item.dictValue == localValue.value)?.dictLabel
  buttonInfo.type = typeArr[localValue.value * 1 + 1]
}
watch(
  () => [localValue.value],
  () => {
    init()
  }
)
onMounted(() => {
  init()
})
</script>
<style lang="scss" scoped></style>
